<template>
	<view>
			<!-- 自定义导航栏 -->
			<view class="navBarBox">
				<!-- 状态栏占位 -->
				<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
				<!-- 真正的导航栏内容 -->
				<view class="navBar">
					<view class="goback">
						<view @click="goBack" class="goicon"style="background:url(../../static/goback.png);background-size:contain;background-repeat: no-repeat;">			
						</view>
					</view>
					<view class="title">报名情况</view>
					<view class="right">
						
					</view>
				</view>
			</view>
			<!-- 页面内容 -->
			<view>		
				<view class="data">{{year}}年{{month}}月</view>
				<view class="dataBox">
					<view class="classtable today" :class="bianseindex==index?'bianse':''" v-for="(item,index) in week" :key="index" @click="bianse(index,year,month,item.day)" >
						<view class="weekend" v-if="new Date().getDate() == item.day">今天
						<image src="../../static/img/checked.png" mode=""></image></view>
						<view class="weekend" v-else>{{item.week}}</view>
						<view class="day">{{item.day}}</view>
					</view>
				</view>
				<view class="timer">
					<text :class="timeBg==index?'curry1':''" v-for="(item,index) in time" :key="index" @click="timebianse(index,item)">{{item}}</text>
				</view>
				<view class="jianju"></view>
				<view class="student">
					<view class="wei">
						<text>未报名学生</text>
					</view>
					<view>
						<text>黄瑜</text>
						<text>黄小瑜</text>
						<text>黄大瑜</text>
						<text>黄二瑜</text>	
						<text>黄三瑜</text>
					</view>
				</view>
				<view class="jianju"></view>
				<view class="y-student">
					<view>
						<text>已报名学生</text>
					</view>
					<view class="y-kapian">
						<view>
							<image src="" mode=""></image>
						</view>
						<view class="y-kright">
							<view>
								<text class="yk-1">春天培训班</text>
								<text class="yk-2">阶梯教室</text>
							</view>
							<view class="yk-3">
								<text>渣渣辉</text>
								<text>古天乐</text>
								<text>陈小春</text>
								<text>周小华</text>
								<text>黄四瑜</text>
								<text>黄五瑜</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	
</template>

<script>
	export default {
		data() {
					return {
						// 状态栏高度
						statusBarHeight: 0,
						// 导航栏高度
						navBarHeight: 82 + 11,
						bianseindex:-1,
						year: '',
						month: '',
						week:[], //存放当前时间对应的周
						date:'',
						timeBg:-1,
						time:null, //存储后台返回的时间段
						timeduan:'', // 存储要向后台发送的时间段
						//教师Id
						techerId:'',
					};
				},
				props: {
		
				},
				//第一次加载时调用
				created() {
					//获取手机状态栏高度
					this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
					this.techerId=uni.getStorageSync('techerId')
					console.log(this.techerId)
					this.getweek()
					this.statusqingkuang()
				},
				methods:{
					statusqingkuang() {
						this.$myRequest({
							url:'/headTeacher/findCourseAndStudentByTime',
							data:{
								teacherNo:this.techerId,
								startTime: this.date,
								period:this.timeduan
							},
							success:(res)=>{
								console.log(res)
							}
						})
					},
					bianse(index,y,m,d){
						this.bianseindex = index;
						this.date=y+'/'+m+'/'+d;
						this.statusqingkuang()
					},
					timebianse(index,val){
						this.timeBg = index;
						console.log(val)
						this.timeduan = val;
						
						// this.schedule()
					},
					goBack(){
						// 此处是写返回页面的方法、
									
						uni.navigateBack({
						    delta: 1//返回只上一级页面
						});
					},
					getweek() {
						let arr = [];
						let json={};
						let nowData = new Date();
							this.year = nowData.getFullYear();
							this.month = nowData.getMonth()+1;
						    //获取今天的是周几
						    let currentDay = nowData.getDay();
						    //把currentDay == 0赋值给周日
						    if(currentDay == 0){
						        currentDay = 7
						    }
							for(var i=0; i<7;i++) {
								json = {}
								let dayTime = nowData.getTime() - (currentDay - (i+1)) * 24 * 60 * 60 * 1000;
								let day = new Date(dayTime).getDate()
								let week = '周' + '一二三四五六日'.charAt(i)
								json.week = week;
								json.day = day;
								arr.push(json);			
							}
							this.week = arr;
					}
				}
	}
</script>

<style lang="less" scoped>
	
	.navBarBox {}
	
		.navBarBox .statusBar {}
	
		.navBarBox .navBar {
			padding: 3rpx 50rpx;
			padding-bottom: 8rpx;
			display: flex;
			justify-content: space-between;
	
			line-height: 93rpx;
			font-size: 40rpx;
		}
	
		.goback {
			flex: 1;
			height: 100%;
		}
		.goicon{
			width: 30rpx;
			height: 30rpx;
			background-color: #00BEA9;
			margin-top: 30rpx;
		}
		.title {
			flex: 1;
			height: 100%;
			
		}
		.right{
			flex: 1;
		}
	
	
	body {
		width: 100%;
		height: 100%;
		background-color: #fafafa;
	}

	.status_bar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 128rpx;
		background-color: #ffffff;
	}

	.data {
		font-size: 40rpx;
		color: rgb(46, 46, 46);
		margin-left: 24rpx;
		margin-top: 30rpx;
	}

	.dataBox {
		display: flex;
		padding: 0 30rpx;
		justify-content: space-between;

		.classtable {
			text-align: center;
			// margin-top: 30rpx;
			width: 90rpx;
			border-radius: 8rpx;
			height: 150rpx;
			background: #efeded;
			overflow: hidden;
			position: relative;
			
		
			image {
				position: absolute;
				top: 0;
				left: 0;
				height: 0;
				width: 24rpx;
				height: 24rpx;
			}

			.weekend {
				font-size: 25rpx;
				margin-top: 30rpx;
			}

			.day {
				font-size: 34rpx;
				margin-top: 20rpx;
			}
		}

		.classtable.active {
			background: #007AFF;
		}

		.today {
			// margin-left: 30rpx;
		}
	}
	.timer{
		margin-top: 45rpx;
		display: flex;
		width: 690rpx;
		// flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: space-between;
		margin-bottom: 35rpx;
		padding: 0 30rpx;
		
		text {
			width: 342rpx;
			height: 56rpx;
			background-color: #e8f7ff;
			text-align: center;
			line-height: 56rpx;
			font-size: 26rpx;
			border-radius: 10rpx;
			color: #2db3fe;
			margin-bottom: 10rpx;
		}
		.curry1 {
			background: #2db3fe;
			color: #fff;
		}
	}
	.jianju{
		width: 750rpx;
		height: 20rpx;
		background: #e6e6e6;
	}
	.student{
		width: 750rpx;
		height: 200rpx;
		// margin-top: 20rpx;
		// background: #3F536E;
		view:first-child{
			// display: flex;
			// padding-top:20rpx ;
			// padding-left: 32rpx;
			margin:30rpx 0 0 20rpx;
			font-size: 38rpx;
		}
		view:last-child{
			margin-top: 60rpx;
			// margin-left: 32rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: space-around;
		}
	}
	.y-student{
		
		>view:first-child{
			font-size: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;	
			width: 200rpx;
			height: 24rpx;
			background: #a2f8ee;
			margin: 30rpx 0 30rpx 30rpx;
			text{
				font-size: 38rpx;
			}
		}
		.y-kapian{
			margin: 0 30rpx;
			// width: 690rpx;
			height: 212rpx;
			display: flex;
			flex-direction: row;
			padding: 32rpx;
			box-shadow: 1rpx 1rpx 1rpx 1rpx #C8C7CC;
			image{
				width: 110rpx;
				height: 124rpx;
				background: #4CD964;
				margin-top: 44rpx;
			}
			.y-kright{
				margin-left: 34rpx;
				margin-top: 44rpx;
				.yk-1{
					font-size: 34rpx;
				}
				.yk-2{
					margin-left: 22rpx;
					font-size: 20rpx;
					color: #c8c8c8;
				}
				.yk-3{
					margin-top: 28rpx;
					font-size: 28rpx;
					text{
						margin-right: 46rpx;
					}
					text:nth-child(4n){
						margin-right: 0;
					}
				}
			}
		}
	}
	.wei{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #a2f8ee;
		width:200rpx;
		height: 24rpx;
		text{
			font-size: 38rpx
		}
	}
	.bianse {
		background-color: #2db3fe !important;
	}
</style>
